<!--
- Author:   .
- Date:    2017/7/17 0017.
- File:    password.
-->
<template>
  <div>
    <div class="EditReceiptAddress">
      <ul>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-tel"></i></div>
          <div class="fl w550">
            <!--<span>{{memberInfo.member_mobile}}</span>-->
            <input type="tel" class="inp" placeholder="输入账号(手机号)" v-model="mobile">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-user2"></i></div>
          <div class="fl w550">
            <!--<span>{{memberInfo.member_mobile}}</span>-->
            <input type="tel" class="inp" placeholder="输入ID号" v-model="member_id">
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-password"></i></div>
          <div class="fl w550">
            <input type="password" class="inp" placeholder="填写新的数字加字符密码" v-model="pwd">
          </div>
        </li>
        <li class="login_ipt" style="position: relative; margin-bottom: 0; border-bottom: 1px solid #dcdddd">
          <i class="iconfont icon-edit" style="position: absolute; top: 13px; left: 0.5rem; font-size: 14px;"></i>
          <input type="text" placeholder="图形验证码" style="text-indent: 1.25rem;font-size: 14px;padding-left: 12px;" v-model="imgCode">
          <div style="position: absolute; right: 10px; top: 8px;width: 120px; height: 27px; line-height: 26px; border: 1px solid #aaa">
            <img style="width: 90px; height: 26px;" :src="imgCodeSrc" alt="">
            <span style=" position: absolute; right: 0; top: 0; display: inline-block; height: 26px; width: 30px; line-height: 26px;text-align: center" @click="getImgCode">刷新</span>
          </div>
        </li>
        <li class="sli">
          <div class="lefticon"><i class="iconfont icon-postcode"></i></div>
          <div class="fl w550">
            <input type="tel" class="inp" placeholder="填写验证码" v-model="secode">
            <message-code :classes="'yanzm'" :sended-style="sendedStyle" :tel="mobile" :imgcode="imgCode" type="2" :callback="handleMessageCode"></message-code>
          </div>
        </li>
      </ul>
      <div class="pl20 pr20 mt35"><button type="button" class="but_1 wauto" style="background-color: rgb(230, 122, 126);" @click="updatePwd">确定</button></div>
    </div>
     <back-nav></back-nav>
  </div>
</template>

<script>
  import {mapModules, mapRules} from 'vuet'
  import messageCode from '../../components/message-code.vue'

  export default{
    mixins: [
      mapModules({memberInfo: 'memberInfo'}),
      mapRules({once: 'memberInfo'})
    ],
    data() {
      return {
        hostName: 'http://' + window.location.hostname,
        sendedStyle: {color: '#999999', border: '1px solid #999999'}, // 验证码发送后的验证码按钮样式
        mobile: '',
        pwd: '',
        secode: '',
        imgCode: '', // 图片验证码
        imgCodeSrc: '', // 图片验证码图片地址
        member_id: ''
      }
    },
    components: {
      'message-code': messageCode
    },
    created() {
      this.mobile = this.memberInfo.member_mobile || ''
      this.imgCodeSrc = this.hostName + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
    },
    methods: {
      getImgCode() {
        this.imgCodeSrc = this.hostName + '/index.php?act=seccode&op=makecode&nchash=48ae8d0d&t=' + Math.random()
      },
      handleMessageCode(code) {
      },
      updatePwd() {
        if (!this.$validator.phone(this.mobile)) {
          this.$toast('请输入手机号')
          return
        }
        if (!this.pwd) {
          this.$toast('请设置密码')
          return
        }
        if (this.secode == '') {
          this.$toast('请输入验证码')
          return
        }
        if (this.member_id == '') {
          this.$toast('请输入用户id号')
          return
        }
        this.$request.updatePwd(this.mobile, this.pwd, this.secode, this.member_id).then(data => {
          this.$toast('设置成功')
          this.$router.go(-1)
        }).catch(e => {
          this.$toast('设置失败:' + e.msg)
          console.error('修改密码失败', e)
        })
      }
    }
  }
</script>

<style>
  .yanzm {
    width: 4.5rem
  }
</style>
